<template>
  <div class="VerifyLoginComponent_container">

    <div class="login_container_right_main_input">
      <el-input v-model="formData.phone" placeholder="请输入手机号" />
    </div>
    <div class="login_container_right_main_input2">
      <el-input v-model="formData.code" placeholder="请输入验证码" @keyup.enter.native="handleLogin" />
      <div class="login_container_right_main_input2_separate" />
      <a v-if="leftSecond==0" class="login_container_right_main_input2_getCode canClick" @click="sendVerify">发送验证码</a>
      <div v-else class="login_container_right_main_input2_getCode">{{ leftSecond }} 秒后重新发送</div>
    </div>
    <div class="login_container_right_main_operate">
      <a class="login_container_right_main_operate_verifyLogin" @click="typeChange('1')">密码登录</a>
    </div>
    <div class="login_container_right_main_button">
      <el-button @click.native="handleLogin">登录</el-button>
    </div>
    <div class="login_container_right_main_register">
      没有账号？
      <a class="login_container_right_main_register_register" @click="typeChange('4')">注册账号</a>
    </div>
  </div>
</template>

<script>
import { loginByTelephone, sendPhoneCode } from '@/api/common/login'
import { setToken } from '@/utils/auth'
export default {
  name: 'VerifyLoginComponent',
  data() {
    return {
      formData: {
        phone: '',
        code: ''
      },
      leftSecond: 0,
      timer: undefined
    }
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {
    sendVerify() {
      if (this.leftSecond !== 0) {
        return
      }

      if (!this.formData.phone) {
        this.$message({
          message: '请输入手机号',
          type: 'warning'
        })
        return
      }
      const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if (!reg.test(this.formData.phone)) {
        this.$message({
          message: '请输入正确的手机号',
          type: 'warning'
        })
        return
      }
      sendPhoneCode({ phone: this.formData.phone }).then(res => {
        if (res) {
          this.startTimer()
        }
      })
    },
    startTimer() { // 开始定时器
      this.leftSecond = 60
      this.timer = setInterval(() => {
        this.leftSecond--
        if (this.leftSecond == 0) {
          this.stopTimer()
        }
      }, 1000)
    },
    stopTimer() { // 关闭定时器
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    checkForm() {
      if (!this.formData.phone) {
        this.$message({
          message: '请输入手机号',
          type: 'warning'
        })
        return false
      }

      const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if (!reg.test(this.formData.phone)) {
        this.$message({
          message: '请输入正确的手机号',
          type: 'warning'
        })
        return
      }
      if (!this.formData.code) {
        this.$message({
          message: '请输入验证码',
          type: 'warning'
        })
        return false
      }
      return true
    },
    handleLogin() {
      if (this.checkForm()) {
        this.loading = true
        loginByTelephone(this.formData).then(res => {
          if (res && res.token) {
            this.$store.state.user.token = res.token
            setToken(res.token) // token存入cookie

            this.$router.push({
              // path: this.redirect || '/homePage',
              path: this.redirect || '/',
              query: this.otherQuery
            })
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },
    typeChange(type) {
      this.$parent.typeChange(type)
    }
  }
}
</script>

<style lang="less" scoped>

.VerifyLoginComponent_container {
  width: 100%;
  height: 100%;

  .login_container_right_main_input {
    margin-top: 60px;
  }

  .login_container_right_main_input2 {
    margin-top: 20px;display: flex;background-color: rgba(231, 234, 243, 0.6);
    align-items: center;border-radius: 8px;
    /deep/ .el-input__inner {
      border-radius: 8px;background-color: transparent;
    }
    .login_container_right_main_input2_getCode{
      width: 160px;background-color: transparent;
      border-radius: 0px 8px 8px 0px;font-size: 15px;
      display: flex;justify-content: center;align-items: center;
    }
    .canClick{
      color: rgba(57, 125, 255, 1);
    }
    .login_container_right_main_input2_separate{
      height: 20px;
      width: 1px;
      background-color: rgba(206, 206, 206, 1)
    }
  }

  .login_container_right_main_operate {
    display: flex;
    justify-content: space-between;
    color: rgba(57, 125, 255, 1);
    font-size: 15px;
    margin-top: 20px;
  }

  .login_container_right_main_button {
    margin-top: 60px;

    /deep/ .el-button {
      width: 100%;
      height: 40px;
      background-color: rgba(57, 125, 255, 1);
      border-radius: 8px;
      border: 0px;
    }

    /deep/ .el-button:hover {
      background-color: rgba(57, 125, 255, 0.8);
    }
  }

  .login_container_right_main_register{
    margin-top: 60px;
    display: flex;justify-content: center;align-items: center;
    font-size: 15px;
    color: rgba(153, 153, 153, 1);
    .login_container_right_main_register_register{
      color: rgba(57, 125, 255, 1);
    }
  }
}

/deep/ .el-input__inner {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  background-color: rgba(231, 234, 243, 0.6);
  padding-left: 20px;
  border: 0px;

}

/deep/ .el-input__icon {
  line-height: 40px;
}

/deep/ .el-input__inner::placeholder {
  color: rgba(51, 51, 51, 0.6);
}
</style>

